import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_test_1/colors.dart';
import 'package:flutter_test_1/ex_widget.dart';
import 'package:flutter_test_1/image.dart';
import 'package:flutter_test_1/just_test_text.dart';
import 'package:flutter_test_1/text.dart';

class ListViewCanSeeOutsideItemView extends StatelessWidget {
  const ListViewCanSeeOutsideItemView({Key? key}) : super(key: key);

  final double itemHeight = 50;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scrollable Container Example'),
      ),
      body: Stack(children: [
        Column(
          children: [
            Container(
              height: itemHeight * 2,
              width: double.infinity,
              color: AppColors.testColor1,
            ),
            Container(
              height: itemHeight,
              width: double.infinity,
              color: AppColors.testColor2,
            ),
            Container(
              height: itemHeight * 2,
              width: double.infinity,
              color: AppColors.testColor1,
            ),
          ],
        ),
        Container(
          height: itemHeight * 5,
          child: Center(
            child: ListView.builder(
              padding: EdgeInsets.symmetric(vertical: itemHeight * 2),
              itemCount: 10,
              itemBuilder: (context, index) {
                return Container(
                  width: 100.0,
                  height: itemHeight, // 设置每个项的宽度
                  margin: EdgeInsets.symmetric(horizontal: 40.0),
                  color: Colors.blue,
                  child: Center(
                    child: Text(
                      'Item $index',
                      style: TextStyle(fontSize: 16.0, color: Colors.white),
                    ),
                  ).onTap(() {
                    print("item have clicked $index");
                  }),
                );
              },
            ),
          ),
        ),
      ]),
    );
  }
}
